<template>  
    <div>  
      <div ref="content" class="content">  
        <!-- 这里是你要转换为 PDF 的内容 -->  
        <div v-for="(page, index) in pages" :key="index" class="page">  
          <h2>Page {{ index + 1 }}</h2>  
          <div class="report-container">  
            <div v-if="index == 0" class="report-info">  
              <h1>健康体检报告单</h1>  
              <p>姓名: {{ userInfo.name }}</p>  
              <p>性别: {{ userInfo.gender }}</p>  
              <p>年龄: {{ userInfo.age }}</p>  
              <p>体检号: {{ userInfo.examNumber }}</p>  
              <p>体检日期: {{ userInfo.examDate }}</p>  
            </div> 
            <div v-if="index == 1" class="report-info1">  
                <div class="health-checkup-page">  
                    <header>  
                    <div class="header-title"><b>健璟体检中心</b></div>
                    <div class="header-date">
                        体检日期：xxxx
                    </div>
                    <hr>  
                    </header>
                    <div class="info">
                        <p>尊敬的：<span class="placeholder">姓名</span>女士：</p>  
                        <p>感谢您来到<span class="placeholder">健璟体检中心</span>进行健康体检！</p>  
                        <p>为了增加您对健康体检的认识，我们在此特别向您说明，健康体检检查的目的在于及时、全面地了解自身的健康状况，提高健康保健意识。</p>  
                        <p>如果此次检查在正常范围内，只表示您选择的体检项目所反映的身体健康状况。由于体检手段及项目所限，并不能完全排除身体潜在疾病。若有疾病症状出现，请您及时到医院就医。</p>  
                        <p>“健康是人生最宝贵的”。不良的生活习惯和行为会损坏您的健康，我们真诚希望您保持科学健康的生活方式，定期接受健康检查。在您最需要的时候请随时与我们联系。欢迎您再次光临<span class="placeholder">健璟体检中心</span></p>  
                        <p>祝您,健康快乐！</p>
                    </div>  
                </div>   
            </div> 
          </div>
        </div>
      </div>
      <button @click="downloadPdf">Download PDF</button>  
    </div>  
  </template>  
    
  <script>  
  import html2canvas from 'html2canvas';  
  import jsPDF from 'jspdf';  
    
  export default {  
    data() {  
      return {  
        pages: [  
          { content: 'This is the content of the first page.' },  
          { content: 'This is the content of the second page.' },  
          { content: 'This is the content of the third page.' },  
          // 添加更多页面内容  
        ],  
        userInfo: {  
          name: '张三',  
          gender: '男',  
          age: 30,  
          examNumber: '20230401001',  
          examDate: '2023-04-01'  
        },  
      };  
    },  
    methods: {  
      async downloadPdf() {  
        const content = this.$refs.content;  
        const pageHeight = 992; // A4 纸高度（纵向）  
        const pageWidth = 595; // A4 纸宽度（纵向）  
        const totalPages = this.pages.length;  
    
        const pdf = new jsPDF({  
          orientation: 'portrait',  
          unit: 'px',  
          format: [pageWidth, pageHeight],  
        });  
    
        for (let i = 0; i < totalPages; i++) {  
          const pageElement = content.querySelector(`.page:nth-child(${i + 1})`);  
          const canvas = await html2canvas(pageElement, { scale: 2 });  
          const imgData = canvas.toDataURL('image/png');  
          const imgProps = pdf.getImageProperties(imgData);  
          const pdfWidth = pageWidth;  
          const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;  
    
          pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);  
    
          if (i < totalPages - 1) {  
            pdf.addPage();  
          }  
        }  
    
        pdf.save('generated.pdf');  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .content {  
    display: flex;  
    flex-direction: column;  
  }  
  
  .page {  
    break-after: always;  
    page-break-after: always;  
    margin-bottom: 20px; /* 确保每页之间有间距 */  
  }  
  .placeholder {  
    font-style: italic;  
    color: #888;  
    /* 可以使用 JavaScript 动态替换这些占位符 */  
  } 
  footer {  
    text-align: center;  
    margin-top: 20px;  
    font-size: 0.9em;  
    color: #555;  
  }
  .report-info1{
    float: left;
  }
  .health-checkup-page {  
  font-family: Arial, sans-serif;  
  margin: 0 auto;  
  padding: 50px;  
  border: 1px solid #ccc;  
  border-radius: 8px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  text-align: left;
  text-indent: 2em; 
}  
.info{
  margin-top: 50px;
}
.placeholder {  
  font-style: italic;  
  color: #888;  
  /* 可以使用 JavaScript 动态替换这些占位符 */  
}  
  
header {  
  text-align: center;  
  margin-top: 20px;  
  font-size: 0.9em;  
  color: #555;  

}  
header hr{
  color: #555;
  width: 95%;
}
.header-title{
  font-size: 16px;
  float: left;
  margin-bottom: 10px;

}
.header-date{
  font-size: 12px;
  float: right;
}
  </style>